<template>
	<div :class="`my-preview ${editCanvasConfig.previewScaleType}`">
		<template v-if="['scrollY', 'scrollX'].includes(editCanvasConfig.previewScaleType)">
			<!-- 实体区域 -->
			<div ref="entityRef" class="my-preview-entity">
				<!-- 缩放层 -->
				<div ref="previewRef" class="my-preview-scale">
					<!-- 展示层 -->
					<div :style="previewRefStyle">
						<!-- 渲染层 -->
						<RenderList />
					</div>
				</div>
			</div>
		</template>
		<template v-else>
			<!-- 缩放层 -->
			<div ref="previewRef" class="my-preview-scale">
				<!-- 展示层 -->
				<div :style="previewRefStyle">
					<!-- 渲染层 -->
					<RenderList />
				</div>
			</div>
		</template>
	</div>
</template>

<script setup>
import RenderList from './RenderList.vue';
import { infoCatalog } from '@a/website';
import { setTitle, JSONParse } from '@u';
import { useScale } from './hooks/useScale.hook';
import { apgeInterData } from './hooks/useInterData.hook';

const { websiteId, pageId } = useRoute().params,
	editCanvasConfig = ref({});

// 初始化数据
$store.chart.componentRefs = {};
$store.chart.RenderComponentList = [];
$store.chart.pageData = {};

Promise.all([$store.user.ModuleList(websiteId), infoCatalog({ id: pageId })]).then((res) => {
	editCanvasConfig.value = JSONParse(res[1].data.jsonContent).editCanvasConfig;
	$store.chart.RenderComponentList = JSONParse(res[1].data.jsonContent).componentList;
	// 浏览器title
	setTitle(editCanvasConfig.value.pageName);
	if (editCanvasConfig.value.apiList?.length) editCanvasConfig.value.apiList.forEach((item) => apgeInterData(item));
});

// 设置页面的自适应
const entityRef = shallowRef(),
	previewRef = shallowRef();
watchEffect(() => {
	if (entityRef.value && previewRef.value && editCanvasConfig.value) useScale(editCanvasConfig, entityRef, previewRef);
});

// 展示层样式
const previewRefStyle = computed(() => {
	const { width, height, selectColor, background, backgroundImage } = editCanvasConfig.value;

	// 背景
	const computedBackground = selectColor
		? { background: background }
		: { background: `url(${backgroundImage}) center center / cover no-repeat !important` };

	return {
		position: 'relative',
		width: width ? `${width || 100}px` : '100%',
		height: height ? `${height}px` : '100%',
		...computedBackground
	};
});
</script>

<style lang="scss" scoped>
@include b('preview') {
	position: relative;
	height: 100vh;
	width: 100vw;
	background-image: linear-gradient(120deg, #18181c 0%, #18181c 100%);
	&.fit,
	&.full {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		.my-preview-scale {
			transform-origin: center center;
		}
	}
	&.scrollY {
		overflow-x: hidden;
		.my-preview-scale {
			transform-origin: left top;
		}
	}
	&.scrollX {
		overflow-y: hidden;
		.my-preview-scale {
			transform-origin: left top;
		}
	}
	.my-preview-entity {
		overflow: hidden;
	}
}
</style>
